<script setup lang="ts">
import type { GuessItemVO } from "@/types/homeType";

interface GoodProps {
   good: GuessItemVO;
}

defineProps<GoodProps>();

</script>

<template>
   <navigator class="good-item" :url="`/subPackages/detail/detail?id=${good.id}`">
      <image class="image" mode="aspectFill" :src="good.picture"></image>
      <view class="name">{{ good.name }}</view>
      <view class="price">
         <text class="small">¥</text>
         <text>{{ good.price }}</text>
      </view>
   </navigator>
</template>

<style scoped lang="scss">
.good-item {
   width: 345rpx;
   padding: 24rpx 20rpx 20rpx;
   margin-bottom: 20rpx;
   border-radius: 10rpx;
   overflow: hidden;
   background-color: #fff;

   .image {
      width: 304rpx;
      height: 304rpx;
   }

   .name {
      height: 75rpx;
      margin: 10rpx 0;
      font-size: 26rpx;
      color: #262626;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
   }

   .price {
      line-height: 1;
      padding-top: 4rpx;
      color: #cf4444;
      font-size: 26rpx;
   }

   .small {
      font-size: 80%;
   }
}

</style>